<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

  :root {
    --primary-color: #185ee0;
    --secondary-color: #e6eef9;
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    font-family: "Inter", sans-serif;
    background-color: rgba(230, 238, 249, 0.5);
  }

  .container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tabs {
    display: flex;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
    padding: 0.75rem;
    border-radius: 99px;
  }

  .tabs * {
    z-index: 2;
  }

  input[type=radio] {
    display: none;
  }

  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 200px;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
  }

  .notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.75rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    transition: 0.15s ease-in;
  }

  input[type=radio]:checked+label {
    color: var(--primary-color);
  }

  input[type=radio]:checked+label>.notification {
    background-color: var(--primary-color);
    color: #fff;
  }

  input[id=radio-1]:checked~.glider {
    transform: translateX(0);
  }

  input[id=radio-2]:checked~.glider {
    transform: translateX(100%);
  }

  input[id=radio-3]:checked~.glider {
    transform: translateX(200%);
  }

  .glider {
    position: absolute;
    display: flex;
    height: 54px;
    width: 200px;
    background-color: var(--secondary-color);
    z-index: 1;
    border-radius: 99px;
    transition: 0.25s ease-out;
  }

  @media (max-width: 700px) {
    .tabs {
      transform: scale(0.6);
    }
  }
</style>

<body>
  <div class="container">
    <div class="tabs">
      <input type="radio" id="radio-1" name="tabs" checked />
      <label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label>
      <input type="radio" id="radio-2" name="tabs" />
      <label class="tab" for="radio-2">Development</label>
      <input type="radio" id="radio-3" name="tabs" />
      <label class="tab" for="radio-3">Completed</label>
      <span class="glider"></span>
    </div>
  </div>
</body>

</html>